<template>
  <div class="mainAppBuild">
    <div class="layout1">
      <div class="content">
        <div class="left">
          <img src="../assets/yzt/09-图片1.png" />
        </div>
        <div class="right">
          <span class="title">简单配置无需编码</span>
          <span class="subContent"
            >强大的GIS工具，继承30多个GIS功能小部件(包括，测量小部件、图层小部件、地图库小部件、打印小部件、查询小部件等等)帮助您来完善应用程序的交互功能，您可以根据需要选择相应的小部件将其添加入您的应用程序。</span
          >
          <Button @click="openAppBuild" :disabled="btnAble">马上使用 ></Button>
        </div>
      </div>
    </div>
    <div class="layout2">
      <div class="content">
        <div class="left">
          <span class="title">30+小部件可供选择</span>
          <span class="subContent"
            >即便您没有任何代码基础，所有操作都可以完全所见即所得的方式通过简单的配置，添加应用程序的功能，选择应用程序的主题，改变整体的风格样式，构建一个完全属于您自己的Web应用程序。</span
          >
          <Button @click="openAppBuild" :disabled="btnAble">马上使用 ></Button>
        </div>
        <div class="right">
          <img src="../assets/yzt/09-图片2.png" />
        </div>
      </div>
    </div>
    <div class="filter" v-show="appMsgState"></div>
    <AppMsg :appMsg="appMsg" v-if="appMsgState" @showAppMsg="getState"></AppMsg>
  </div>
</template>
<script>
import Config from "../config";
import AppMsg from "../components/AppBuilder/AppMsg";
export default {
  data() {
    return {
      token: sessionStorage.getItem("portalToken"),
      appMsg: [],
      btnAble: false,
      num: 10,
      appMsgState: false,
    };
  },
  components: { AppMsg },
  methods: {
    openAppBuild() {
      this.appMsgState = true;
    },
    getState(data) {
      this.appMsgState = data;
    },
    // getToken() {
    //   if (document.cookie) {
    //     let temp1 = decodeURIComponent(document.cookie).split(";");
    //     let temp3;
    //     for (let i = 0; i < temp1.length; i++) {
    //       if (temp1[i].indexOf("esri_auth=") != -1) {
    //         temp3 = temp1[i];
    //         break;
    //       }
    //     }
    //     if (!JSON.parse(temp3.split("=")[1]).hasOwnProperty("token")) {
    //       return;
    //     }
    //     this.token = JSON.parse(temp3.split("=")[1]).token;
    //     this.btnAble = false;
    //   } else {
    //     this.btnAble = true;
    //   }
    // },
    getApp() {
      let queryPara =
        " owner:" +
        sessionStorage.name +
        ' orgid:0123456789ABCDEF ownerfolder:root type: "Web Mapping Application"';
      let paraStr =
        "num=" +
        this.num +
        "&start=0&q=" +
        queryPara +
        "&f=json&token=" +
        this.token;
      this.$.get(
        Config.appBuildConfig.searchUrl + "?" + encodeURI(paraStr)
      ).done((res) => {
        this.num = res.total;
        paraStr =
          "num=" +
          this.num +
          "&start=0&q=" +
          queryPara +
          "&f=json&token=" +
          this.token;
        this.$.get(
          Config.appBuildConfig.searchUrl + "?" + encodeURI(paraStr)
        ).done((res1) => {
          this.appMsg = res1.results;
        });
      });
    },
  },
  created() {
    if (!sessionStorage.getItem("portalToken")) this.btnAble = true;

    console.log(this.btnAble);
    this.getApp();
  },
};
</script>
<style scoped>
.mainAppBuild {
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 1);
}
.layout1,
.layout2 {
  width: 100%;
  height: 450px;
}
.content {
  width: 50%;
  height: 100%;
  margin: 0 auto;
  padding: 60px 0;
}
.layout1 .left {
  /* width: 30%; */
  float: left;
}
.layout1 .right {
  width: 60%;
  float: right;
}
.layout2 .left {
  width: 60%;
  float: left;
}
.layout2 .right {
  /* width: 30%; */
  float: right;
}
.layout1 .right > .title,
.layout2 .left > .title {
  font-size: 30px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(52, 67, 78, 1);
  padding: 10px;
}
.layout1 .right > .subContent,
.layout2 .left > .subContent {
  font-size: 15px;
  font-family: PingFangSC-Light, PingFang SC;
  font-weight: 300;
  color: rgba(52, 67, 78, 1);
  padding: 10px;
}
.layout1 .right > button,
.layout2 .left > button {
  margin: 10px;
}
span {
  display: inline-block;
}
.filter {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(102, 102, 102, 1);
  opacity: 0.3566;
  z-index: 998;
}
</style>
